{% extends "kitchen/dashboard_base.html" %}

{% load compile_static %}
{% load static %}

{% block cssincludes %}
<link href="{% static 'orders.scss'|compile %}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block content %}

<h3>New Order</h3>

<form id="create-order-form" class="card" method="post">
    <div class="form-group">
        <label>Party</label>
        <select name="party" class="form-control">
            <option value="0">New Party</option>
            {% for party in parties %}
                <option value="{{party.id}}">{{party.name}}</option>
            {% endfor %}
        </select>
    </div>

    <div class="form-group" style="display: none;">
        <label>Party Member</label>
        <div class="party-member-container">
            <span id="party-member-list" data-toggle="buttons">
                <label class="btn btn-secondary">
                    <input type="radio" name="party_member" value="1" autocomplete="off" />
                    <span class="party-member-label">1</span>
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="party_member" value="2" autocomplete="off" />
                    <span class="party-member-label">2</span>
                </label>
            </span>
            <a id="add-party-member" class="btn btn-outline-success" aria-label="Add new member">+</a>
        </div>
    </div>

    <div class="form-group">
        <label>Choose items</label>
        <div class="order-select-items">
            <ol class="order-select-breadcrumbs btn-group">
            </ol>
            <ul class="menu-select-list">
            </ul>
            <ul class="order-selected-items">
            </ul>
        </div>
    </div>

    <div class="form-group">
        <input type="submit" class="btn btn-primary" name="submit" value="Submit" />
    </div>
</form>

<div class="modal fade" id="ingredients-selector-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Select ingredients</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block templates %}

<ul class="tpl-menu-select-category">
    <li class="menu-select-category" data-category=""></li>
</ul>

<ul class="tpl-menu-select-item">
    <li class="menu-select-item" data-item=""></li>
</ul>

<ul class="tpl-order-select-breadcrumb">
    <li class="btn btn-secondary"><a></a></li>
</ul>

<div class="tpl-modal-ingredient">
    <label class="btn btn-secondary">
        <input type="checkbox" name="ingredient" autocomplete="off" />
        <span class="modal-ingredient-title"></span>
    </label>
</div>

<ul class="tpl-order-selected-item">
    <li class="order-selected-item">
        <div class="order-selected-body clearfix">
            <div class="selected-tools btn-group float-right">
                <button class="select-quantity-dec btn btn-danger" aria-label="Add ingredient">-</button>
                <button class="selected-quantity btn btn-secondary" aria-label="Quantity" data-quantity="1">1</button>
                <input type="hidden" name="quantity" value="1" />
                <button class="select-quantity-inc btn btn-success" aria-label="Remove ingredient">+</button>
            </div>
            <h4 class="selected-title float-left"></h4>
        </div>
        <ul class="order-selected-ingredients"></ul>
        <div class="order-selected-footer clearfix">
            <span class="order-selected-price"></span>
            <button class="ingredients-btn btn btn-primary">Ingredients</button>
        </div>
    </li>
</ul>

<ul class="tpl-order-selected-ingredient">
    <li class="order-selected-add"><span class="order-action">ADD</span> </li>
    <li class="order-selected-remove"><span class="order-action">NO</span> </li>
</ul>

{% endblock %}

{% block scripts %}

<script src="{% static 'js/MenuSelectWidgetManager.js' %}"></script>

<script>

const apiCategoriesUrl = "{% url "menucategory-list" %}";
const apiItemsUrl = "{% url "menuitem-list" %}";
const apiSubmitOrder = "{% url "api-submitorder" %}";
const ordersUrl = "{% url "orders" %}";

let current_party_index = 2;

const menuWidget = new MenuSelectWidgetManager(
        apiCategoriesUrl, apiItemsUrl);

function addPartyMember() {
    const elem = $(".party-member-container label").first().clone();
    elem.children(".party-member-label").replaceWith(++current_party_index);

    $("#party-member-list").append(" ");
    elem.appendTo("#party-member-list");
}

function submitOrder() {
    const party = $("select[name=party]", '#create-order-form').val();
    const member = $('input[name=party_member]:checked', '#create-order-form').val();
    const selectedItems = menuWidget.getSerializedSelectedIds();

    const postData = {
        "party": parseInt(party),
        "member": parseInt(member),
        "items": selectedItems
    };

    $.post(apiSubmitOrder, JSON.stringify(postData), function(data) {
        if(data.success) {
            console.log("Success!");
            window.location = ordersUrl;
        }
    });
}

$(function() {
    jqueryAjaxSetup();

    $("#add-party-member").click(addPartyMember);
    $("input[name=submit]", "#create-order-form").click(function(e) {
        e.preventDefault();
        submitOrder();
    });

    menuWidget.initListeners();

    // Initially load menu inside of all menu-select-list elements.
    menuWidget.getCategoryList(0, $(".menu-select-list"), menuWidget.loadMenu);
    menuWidget.pushCategoryBreadcrumb($(".order-select-breadcrumbs"), 0, "Menu");
});

</script>

{% endblock %}
